<template>
<el-container>
  <el-header><h1 style="text-align: left; ">阳光学院学生管理系统</h1></el-header>
  <el-container>
    <el-aside width="200px" class="left-menu " style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
    <el-menu 
      default-active="/timetable"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router>
      <el-menu-item index="/sys" >个人信息</el-menu-item>
      <el-menu-item index="/timetable" >课表详情</el-menu-item>
          
    </el-menu>
 
</el-aside>
    <el-main>
      <el-row :gutter="20" >
    <el-col :xs="24" :sm="12" :md="6" :offset="2" v-for="course in courses" :key="courses.id">
      <el-card shadow="hover" style="margin-top: 40px;">
        <div style="display: flex; justify-content: center; align-items: center;">
          <img src="https://img1.baidu.com/it/u=1034795718,3740280113&fm=253&fmt=auto&app=138&f=JPEG?w=581&h=500" style="width: 300px; height: 210px;" />
        </div>
        <p style="text-align: center;">授课老师：{{course.teacher}}<br>课程名称：{{course.name}}</p>
      </el-card>
    </el-col>
    <!-- <el-col :xs="24" :sm="12" :md="6" :offset="6">
      <el-card shadow="hover">
        <div style="display: flex; justify-content: center; align-items: center;">
          <img src="https://img1.baidu.com/it/u=1698059384,3364002473&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=559" style="width: 300px; height: 210px;" />
        </div>
        <p style="text-align: center;">授课老师：李四<br>课程名称：数学</p>
      </el-card>
    </el-col> -->
    
  </el-row>
  <!-- <el-row :gutter="20" style="margin-top: 40px; ">
  <el-col :xs="24" :sm="12" :md="6" :offset="2">
      <el-card shadow="hover">
        <div style="display: flex; justify-content: center; align-items: center;">
          <img src="https://img2.baidu.com/it/u=2054243855,1650638038&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" style="width: 300px; height: 210px;" />
        </div>
        <p style="text-align: center;">授课老师：王五<br>课程名称：英语</p>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6" :offset="6">
      <el-card shadow="hover">
        <div style="display: flex; justify-content: center; align-items: center;">
          <img src="https://img2.baidu.com/it/u=1490535490,1024451536&fm=253&fmt=auto&app=138&f=JPEG?w=671&h=500" style="width: 300px; height: 210px;" />
        </div>
        <p style="text-align: center;">授课老师：赵六<br>课程名称：物理</p>
      </el-card>
    </el-col>
  </el-row> -->
    </el-main>
  </el-container>
</el-container>

</template>

<script>
export default {
    data() {
    return {
      currentDate: new Date(),
      user:[],
      courses:[]
    };
  },
  mounted(){
    this.$axios.get("http://localhost:1010/course").then((res) => {
      this.courses = res.data
    })

  }

}
</script>

<style lang="scss" scoped>

</style>